<template>
	<z-nav-bar title="赚取积分" transparentTitle="auto" :isBlack="false">
		<template #right>
			<navigator url="/pages/my/integral/rule" hover-class="none">规则</navigator>
		</template>
	</z-nav-bar>
	<view class="uni-white">
		<view>我的积分</view>
		<view class="z-font-80 text-w">{{ integralData.integral || 0 }}</view>
	</view>
	<view class="flex_sbc" style="width: 686rpx;">
		<navigator url="/pages/my/integral/list" hover-class="none">
			<view class="flex_cc detail-button">
				<view>积分明细</view>
				<uni-icons type="right" size="10" color="#FFFFFF"></uni-icons>
			</view>
		</navigator>
		<view @click="integralFun" class="uni-white">{{ integralData.isSign ? '已签到' : '立即签到' }}</view>
	</view>
	<view class="common-box uni-mt-40">
		<view class="text-w">
			已连续签到
			<text class="uni-color-main">{{ integralData.signCount }}</text>
			天
		</view>
		<view class="flex_sbc uni-mt-32">
			<view v-for="i in 7" :key="i">
				<image v-if="i < integralData.signCount" :src="setting.oss_pub_domain + '/app-img/my/sign-in-now.png'" class="sign-box"></image>
				<image
					v-else-if="integralData.isSign && integralData.signCount === i"
					:src="setting.oss_pub_domain + '/app-img/my/sign-in-now.png'"
					class="sign-box"
				></image>
				<image v-else :src="setting.oss_pub_domain + '/app-img/my/sign-in-no.png'" class="sign-box"></image>
				<view
					:class="[
						'z-font-24',
						'uni-mt-20',
						integralData.isSign && integralData.signCount === i ? 'uni-color-main' : 'uni-color-grey'
					]"
				>
					{{ integralData.isSign && integralData.signCount === i ? '今天' : `第${i}天` }}
				</view>
			</view>
		</view>
	</view>
	<!-- <view class="exchange">
		<view class="title">充值兑换</view>
		<view class="row">
			<view class="left">
				<image :src="`${setting.sImgUrl}/score/icon@2x(7).png`"></image>
				<view>
					<view>兑换积分</view>
					<view class="rate">比例 1:100</view>
				</view>
			</view>
			<navigator class="right" hover-class="none" url="/pages/student/score/recharge">去兑换</navigator>
		</view>
	</view> -->
	<view class="common-box uni-mt-20">
		<view class="text-w uni-mb-20">做任务赢积分</view>
		<view v-for="(data, index) in dataList" :key="index">
			<view class="flex_sbc" style="height: 120rpx">
				<view class="flex_fsc">
					<image :src="`${setting.oss_pub_domain}/app-img/my/${data.type}.png`" class="item-img"></image>
					<view class="uni-ml-24">
						<view>{{ data.name }}</view>
						<view class="flex_fsc uni-mt-8">
							<view class="z-font-24" style="color: #c4c7cc">{{ data.integralDesc }}</view>
							<uni-icons type="bottom" size="16" color="#C4C7CC"></uni-icons>
						</view>
					</view>
				</view>
				<view v-if="data.status" class="button-comm bg-C4C7CC">已经获取</view>
				<view v-else class="button-comm uni-color-main-bg" @click="completeTask(data.type)">去完成</view>
			</view>
			<view v-if="data.remark" class="desc-box">{{ data.remark }}</view>
		</view>
	</view>
</template>

<script setup>
import { getIntegralTaskList, getIntegral, getSignCount, setSign } from '@/api/integral.js';
import { appShareScuess } from '@/api/student';
import { onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance();

const integralData = reactive({
	integral: 0,
	isSign: false,
	signCount: 0
});
onShow(() => {
	fetchData()
})
function fetchData() {
	getSignCount().then((res) => {
		Object.assign(integralData, res);
		that.$forceUpdate();
	});
}

function integralFun() {
	if (integralData.isSign) return;
	setSign().then((res) => {
		integralData.signCount = integralData.signCount >= 7 ? 7 : integralData.signCount + 1;
		integralData.isSign = true;
		fetchData()
	});
}

// getIntegral().then(res => {
// 	console.log(res);
// })
const dataList = ref([]);
getIntegralTaskList().then((res) => {
	dataList.value = res;
});

function completeTask(type) {
	const typeList = {
		login: '',
		refine_info: '/pages/my/personal-setting/personal-setting',
		add_stu: '/pages/player/add/add',
		upload_cert: '/pages/my/certificate/certificate',
		sell_course: '/pages/course/open-course/open-course',
		answer_question: '/pages/question/index?all=1',
		share: shareFun
	};
	if (typeof typeList[type] === 'function') {
		typeList[type]()
	} else if (typeList[type] === '/pages/tabbar-page/tabbar-1')
		uni.switchTab({
			url: typeList[type]
		});
	else
		uni.navigateTo({
			url: typeList[type]
		});
}

function shareFun() {
	uni.share({
		provider: 'weixin',
		scene: 'WXSceneSession',
		type: 5,
		imageUrl: 'http://golfpub.jgtygolf.com/app-img/logo.png',
		title: '降杆教育',
		miniProgram: {
			id: 'gh_6be15b82eac6',
			webUrl: 'http://golfpub.jgtygolf.com/app-img/logo.png',
			type: 1
		},
		success: (ret) => {
			appShareScuess();
		}
	});
}
</script>

<style lang="scss">
page {
	background: url($oss_pub_domain + '/app-img/my/integral-bg.png') no-repeat;
	background-size: 100%;
	padding: calc(var(--status-bar-height) + 44px + 32rpx) 32rpx 0;
	background-color: $uni-F5F5F5;
}
.bg-C4C7CC {
	background: #c4c7cc;
}
.detail-button {
	width: 152rpx;
	height: 48rpx;
	border-radius: 24rpx;
	border: 2rpx solid $uni-white;
	font-size: 24rpx;
	color: $uni-white;
	margin-top: 14rpx;
}

.common-box {
	width: 686rpx;
	border-radius: 24rpx;
	background: $uni-white;
	box-sizing: border-box;
	padding: 32rpx 32rpx 40rpx;
	.sign-box {
		width: 64rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		font-weight: 700;
	}
	.item-img {
		width: 80rpx;
		height: 80rpx;
	}
	.button-comm {
		width: 128rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		color: $uni-white;
		border-radius: 16rpx;
		font-size: 24rpx;
	}
	.desc-box {
		width: 100%;
		height: 120rpx;
		box-sizing: border-box;
		padding: 24rpx 32rpx;
		background: $uni-F5F5F5;
		border-radius: 16rpx;
		color: #585c66;
	}
}

.exchange {
	width: 624rpx;
	background: #ffffff;
	border-radius: 24rpx;
	padding: 32rpx;
	margin: 24rpx 0;
}
.exchange .title {
	font-size: 32rpx;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #1a2233;
}
.exchange .row {
	margin-top: 24rpx;
	height: 120rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.exchange .row .left {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #1a2233;
}
.exchange .row .left image {
	width: 80rpx;
	height: 80rpx;
	margin-right: 24rpx;
}
.exchange .row .left .rate {
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #c4c7cc;
	margin-top: 6rpx;
}
.exchange .row .right {
	width: 128rpx;
	height: 56rpx;
	background: #00ab64;
	border-radius: 16rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
